<template>
  <ContentWrap>
    <el-row :gutter="20">
      <!-- 左侧章节树 -->
      <el-col :span="4" :xs="24">
        <ContentWrap class="h-1/1">
          <BankChapterTree @node-click="handleDeptNodeClick" :bank-ids="queryParams.bankIds"/>
        </ContentWrap>
      </el-col>
      <el-col :span="20" :xs="24">
        <ContentWrap>
          <BankQuestion :bank-ids="queryParams.bankIds" :chapter="queryParams.chapter" :is-detail="isDetail" :is-role="isRole"/>
        </ContentWrap>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts">
import {useTagsViewStore} from "@/store/modules/tagsView";
import BankChapterTree from "@/views/exam/components/BankChapterTree.vue";
import BankQuestion from "@/views/exam/components/BankQuestion.vue";
/**
 * 题库-试题 页面
 * 可以打开多个题库
 *
 */
defineOptions({name: 'BankQuestionForm'})

const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由
const { params, name } = useRoute() // 查询参数
const detailModel = ref('') // 展现模式: 详情/编辑/选题

const queryParams = reactive({
  bankIds: undefined,
  chapter: undefined,
})

/** 子表的表单 */
const isDetail = ref(false) // 是否查看详情
const isRole = ref(false) // 是否查看详情
/** 打开弹窗 */
const open = async (model: string, ids?: []) => {
  detailModel.value = model
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

/** 关闭按钮 */
const close = () => {
  delView(unref(currentRoute))
  push({ name: 'Bank' })
}

/** 处理章节被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.chapter = row.id
}
/** 初始化 **/
onMounted(async () => {

  // 参数初始化
  const { ids } = params;
  const idArray = ids.split('/').map(id => Number(id));
  queryParams.bankIds = idArray;
  if ('BankQuestionTreeEdit' === name) {
    await open('update', idArray)
    isRole.value = true;
    isDetail.value = false;
  }else if ('BankQuestionTreeDetail' === name) {
    await open('detail', idArray)
    isRole.value = false;
    isDetail.value = true;
  }else if ('BankQuestionTreeRoleDetail' === name) {
    await open('detail', idArray)
    isDetail.value = true;
    isRole.value = true;
  }

})
</script>
